<template>
	<view class = "nav">
		<view :style="'height:'+statusHeight+'rpx;'+containerStyle"></view>
		<view v-if="isHome" class="home-navbar" :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+containerStyle">
			<view class="city" >
				<text>中部地区</text>
			</view>
			<view style="flex:1;">
				<navigator url="/pages/search/search"
				           :style="'height:'+menu.height*2+'rpx;'
						            +'line-height:'+menu.height*2+'rpx;'
									+'margin-top:'+(menu.top * 2 - statusHeight)+'rpx;'
									+'margin-left:32rpx;'
									+'margin-right:'+(menu.width * 2+24)+'rpx;'
									+'background:#f4f4f4;'
									+'border-radius:200rpx;'
									+'text-align:center;'">
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle">
			<view class="back-icon" @click="backToHome">
				<image v-if="pages > 1" src="../../static/back.png" ></image>
				<image v-else src="../../static/back.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">
					<text>{{titleText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onBeforeMount ,reactive ,ref, defineProps} from 'vue';
	
	const props = defineProps({
		background:{
			type:String,
			default:()=>{
				return "rgb(255,255,255,1)"
			}
		},color:{
			type:String,
			default:()=>{
				return "rgb(0,0,0,1)"
			}
		},fontSize:{
			type:String,
			default:()=>{
				return 32
			}
		},iconWidth:{
			type:String,
			default:()=>{
				return 116
			}
		},iconHeight:{
			type:String,
			default:()=>{
				return 38
			}
		},titleText:{
			type:String,
			default:''
		},isHome:{
			type:Boolean,
			default:false
		}
	})
	
	const statusHeight = ref(0)
	const navHeight = ref(0)
	const containerStyle = ref('')
	const textStyle = ref('')
	const iconStyle = ref('')
	const pages = ref(getCurrentPages().length)
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	
	onBeforeMount(()=>{
		setNavHeight()
		setStyle()
	})
	
	const setNavHeight = () =>{
		const {statusBarHeight,system} = uni.getSystemInfoSync();
		statusHeight.value = statusBarHeight * 2
		const isIos = system.indexOf("iOS") > -1
		if(!isIos){
			navHeight.value = 99
		}else{
			navHeight.value = 88
		}
	}
	
	const setStyle = () =>{
		containerStyle.value = ['background:' + props.background].join(";")
		textStyle.value = ['color:' + props.color,'font-size:' + props.fontSize+"rpx"].join(";")
		iconStyle.value = ['width:' + props.iconWidth+'rpx', 'height:'+ props.iconHeight+"rpx"].join(";")
	}
	
	const backToHome = ()=>{
		if(pages.value > 1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
</script>

<style>
	.nav{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.back-icon{
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
	}
	.back-icon image{
		width: 64rpx;
		height: 64rpx;
		margin-left: 20rpx;
	}
	.navbar{
		position: relative;
	}
	.nav-title{
		position: absolute;
		top:0;
		left: 50%;
		transform: translate(-50%);
	}
	.home-navbar{
		display: flex;
		margin-left: 20rpx;
	}
	.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    padding-left: 55rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 40rpx;
	}
	
	.city:after {
	    content: ' ';
	    display: inline-block;
	    height: 6px;
	    width: 6px;
	    border-width: 1px 1px 0 0;
	    border-color: #353535;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: relative;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -4px;
	    right: -10px;
	}
	.search-text {
	    display: inline-block;
	    padding-left: 30rpx;
	    color: #bbbbbb;
	    font-size: 26rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 23rpx;
	}
</style>